<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务</title>
    <script src="angular.js"></script>
    <script src="controller.js"></script>
    <script src="service.js"></script>
</head>
<style>
    .color{
        background-color:yellowgreen;
    }
</style>
<body>
<div ng-app="s9.app">
    <div ng-controller="MainController">
        <!--<div>这个是用Angularjs的$http服务做网络访问的版本</div>-->
        <!--<div>{{data}}</div>-->
        <div>
            <label for="input_name">姓名</label>
            <input type="text" id="input_name" ng-model="newGuest.name">
            <label for="input_phone">电话</label>
            <input type="text" id="input_phone" ng-model="newGuest.phone">
            <button ng-click="actions.add()">邀请</button>
        </div>
        <div>
            <button ng-class="{'color':state=='全部'}" ng-click="actions.filter('全部')">全部</button>
            <button ng-class="{'color':state=='邀请中'}" ng-click="actions.filter('邀请中')">邀请中</button>
            <button ng-class="{'color':state=='已接受'}" ng-click="actions.filter('已接受')">已接受</button>
            <button ng-class="{'color':state=='已拒绝'}" ng-click="actions.filter('已拒绝')">已拒绝</button>
        </div>
        <div>
            <table>
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="guest in list">
                    <td> {{guest.name}} </td>
                    <td> {{guest.phone}} </td>
                    <td> {{guest.state}}</td>
                    <td>
                        <span ng-if="guest.state=='邀请中'">
                            <button ng-click="actions.setState(guest,'接受')">接受</button>
                            <button ng-click="actions.setState(guest,'拒绝')">拒绝</button>
                        </span>
                        <button ng-click="actions.del($index)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>
    var app = angular.module('s9.app', ['s9.ctrl','s9.service']);
    // modelService是我们全程序的数据中心
//    app.service('modelService', function () {
//        // 数据存放的地方
//        var data = [
//            {name: '张三', phone: '18612345673', state: '邀请中'},
//            {name: '李四', phone: '18612345674', state: '已接受'},
//            {name: '王五', phone: '18612345675', state: '邀请中'},
//            {name: '赵六', phone: '18612345676', state: '已拒绝'},
//        ];
//        // 嘉宾的构造函数
//        function Guest(name, phone) {
//            this.name = name;
//            this.phone = phone;
//            this.state = '邀请中'
//        }
//
//        // 下面的四个函数是我们对数据的一些操作
//
//        // 用于往数据源里添加新的一条数据
//        this.add = function (name, phone, callback) {
//            data.push(new Guest(name, phone));
//            var isConnectSuccess = true; // 网络访问的成功与否
//            if (isConnectSuccess) {
//                callback({status: "success", message: '新增成功'})
//            } else {
//                callback({status: "failed", message: '新增失败'})
//            }
//        };
//        // 从数据源中删除项目
//        this.del = function (guest, callback) {
//            // 过滤一下：除了电话和传过来的guest的电话相同的嘉宾，其他的都留下
//            data = data.filter(function (item) {
//                return item.phone != guest.phone;
//            });
//            callback({status: "success", message: '删除成功'})
//        };
//        // 根据条件从数据源中获取一个列表
//        this.getList = function (state, callback) {
//            if (state == '全部') {
//                var result = data.filter(function () {
//                    return true;
//                });
//                callback({status: 'success', data: result})
//            } else {
//                var result_filtered = data.filter(function (item) {
//                    return item.state == state;
//                });
//                callback({status: 'success', data: result_filtered});
//            }
//        };
//        // 修改用户状态
//        this.setState = function (guest, state, callback) {
//            guest.state = state;
//            callback({status: "success", message: '设置状态成功'})
//        }
//    });

//    app.controller('MainController', function ($scope, modelService) {
//        // 我们用modelService来做数据访问
//        var dataAccess = $scope.dataAccess = modelService;
//        var newGuest = $scope.newGuest = {};
//
//        $scope.list = [];
//        $scope.state = '全部';
//
//        dataAccess.getList($scope.state,function (msg) {
//            if(msg.status == 'failed'){
//                alert('数据获取失败');
//            }else{
//                $scope.list = msg.data;
//            }
//        });
//
//        $scope.actions = {
//            add:function () {
//                // msg对象存储了这次操作的结果
//                dataAccess.add(newGuest.name,newGuest.phone,function (msg) {
//                    if(msg.status == 'failed'){
//                        alert('操作失败');
//                    }else{
//                        // getList它的msg对象存储了操作的结果和列表数据
//                        dataAccess.getList($scope.state,function (msg) {
//                            if(msg.status == 'failed'){
//                                alert('操作失败');
//                            }else{
//                                $scope.list = msg.data;
//                            }
//                        })
//                    }
//                })
//            },
//            del:function($index){
//                dataAccess.del( $scope.list[$index],function(msg){
//                    if(msg.status == 'failed'){
//                        alert('操作失败');
//                    }else{
//                        dataAccess.getList($scope.state,function (msg) {
//                            if(msg.status == 'failed'){
//                                alert('操作失败');
//                            }else{
//                                $scope.list = msg.data;
//                            }
//                        })
//                    }
//                })
//            },
//            //全部
//            filter:function(state){
//                $scope.state = state;
//                dataAccess.getList(state,function (msg) {
//                    if(msg.status == 'failed'){
//                        alert('操作失败');
//                    }else{
//                        $scope.list = msg.data;
//                    }
//                })
//            },
//            setState:function(guest,state){
//                dataAccess.setState(guest, state,function(msg){
//                    if(msg.status == 'failed'){
//                        alert('操作失败');
//                    }else{
//                        dataAccess.getList($scope.state,function (msg) {
//                            if(msg.status == 'failed'){
//                                alert('操作失败');
//                            }else{
//                                $scope.list = msg.data;
//                            }
//                        })
//                    }
//
//                })
//            }
//
//        }
//    })
</script>
<!--<script>-->
    <!--var app = angular.module('nl.test', []);-->
    <!--app.controller('MainController', function ($scope, $http) {-->
        <!--var url = 'http://192.168.26.72:8080/nl/add';-->
        <!--$scope.data = {'status': '未作出任何网络访问'};-->
        <!--// $http的get快捷方法。-->
        <!--// 第一个参数：URL-->
        <!--// 第二个参数：Config，请求的设置。我们的请求数据就放在config.data里面。-->
        <!--$http-->
                <!--.get(url, {data: {name: 'zhao', phone: '1414141414'}})-->
                <!--.then(function (res) {-->
                    <!--// then函数第一个参数的回调函数是处理HTTP请求成功的-->
                    <!--$scope.data = res.data;-->
                <!--},function (res) {-->
                    <!--alert('网络请求失败');-->
                <!--})-->
    <!--})-->
<!--</script>-->
</body>
</html>